<template>
	<view>
		<!-----弹出层---->
		<u-popup class="popup" v-model="show" mode="bottom" width="750rpx" height="600rpx" border-radius="14">
			<div class="popInner">
				<u-icon @click="closePopup()" class="closeButton" size="30" name="close"></u-icon>
				<ul class="cashOptions">
					<li :class="item.id === currentId ? 'active' : ''" @click="selectItem(item)" v-for="(item, index) in options" :key="item.id">
						{{ item.name }}
						<u-icon v-if="item.id === currentId" name="checkmark"></u-icon>
					</li>
				</ul>
			</div>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'PopupOptions',
	//传入的参数设置
		props: {
			options: {
				type: Array,
				default:function(){
					return []
				}
			},
			//存放选中文字
			currentItem: {
				type: String,
				default: ''
			},
			//是否显示弹出层
			show: {
				type: Boolean,
				default: false
			},
			//存放修改文字的事件函数
			modifyText:{
				type:String,
				default:''
			}
		},
	data() {
		return {
			//存放弹出层选中的item的id
			currentId: 0,			
	
		};
	},
	methods: {
		//弹出层选项选中方法
		selectItem(item) {
			const { currentId } = this;
			//如果传过来的id不等于当前的currentId，说明有切换选项
			if (item.id !== currentId) {
				//切换id
				this.currentId = item.id;
				//更改文字框里的文字
				/**
				 * 函数名称:changeItemName
				 * 
				 * **/
				console.log(this.modifyText)
				this.$emit(this.modifyText,item.name)
			}
			this.closePopup()

		},
		closePopup(){
			//分发事件 关闭弹窗
			this.$emit('closePopup')
		}
	
	}
};
</script>

<style lang="scss" scoped>
//弹出层
.popup {
	.popInner {
		position: relative;
		width: 90%;
		margin: 0 auto;
		.closeButton {
			position: absolute;
			left: 0rpx;
			top: 10rpx;
		}
		.cashOptions {
			width: 100%;
			padding-top: 50rpx;
			li {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				border-bottom: 1px solid #f4f4f2;
				line-height: 80rpx;
				font-size: 30rpx;
				&.active {
					color: #82acda;
				}
			}
		}
	}
}
</style>
